<template>
  <custom-card :is-card="$props.card">
    <div class="query-pagination">
      <n-pagination
        v-model:page="paginationPage"
        v-model:page-size="pageSize"
        show-quick-jumper
        show-size-picker
        :page-sizes="size"
        :item-count="total"
        v-bind="pagination"
        @update:page-size="pageSizeChange"
      >
        <template #prefix="{ itemCount }">共 {{ itemCount }} 条</template>
      </n-pagination>
    </div>
  </custom-card>
</template>

<script lang="ts" setup name="query-pagination">
  const emit = defineEmits(['update:page', 'update:size'])
  const props = defineProps({
    page: Number,
    total: Number,
    size: Number,
    pagination: Object,
    card: {
      type: Boolean,
      default: true
    }
  })
  const paginationPage = computed({
    get() {
      return props.page
    },
    set(value) {
      emit('update:page', value)
    }
  })

  const pageSize = computed({
    get() {
      return props.size
    },
    set(value) {
      emit('update:size', value)
    }
  })
  const size = [10, 20, 30, 40, 50, 100]

  function pageSizeChange(size) {
    paginationPage.value = 1
    pageSize.value = size
  }
</script>

<style lang="less" scoped>
  .query-pagination {
    display: flex;
    flex-direction: row-reverse;
  }
</style>
